<template>
    <div class="app-container" style="background: #E6EBE9;">
        <div class="home-top" v-if="totalResult">
            <div class="home-top-item home-top-one">
                <span class="home-tit-one">发布量</span>
                <div class="home-tit-two">
                    {{ totalResult.total }}
                    <span class="home-tit-three">篇</span>
                </div>
            </div>
            <div class="home-top-item home-top-two">
                <span class="home-tit-one">浏览量</span>
                <div class="home-tit-two">
                    {{ totalResult.page_view_num }}
                    <span class="home-tit-three">篇</span>
                </div>
            </div>
            <div class="home-top-item home-top-three">
                <span class="home-tit-one">收藏量</span>
                <div class="home-tit-two">
                    {{ totalResult.collection_num }}
                    <span class="home-tit-three">篇</span>
                </div>
            </div>
            <div class="home-top-item home-top-four">
                <span class="home-tit-one">下载量</span>
                <div class="home-tit-two">
                    {{ totalResult.page_download_num }}
                    <span class="home-tit-three">篇</span>
                </div>
            </div>
        </div>
        <div class="home-center">
            <el-card shadow="never" class="home-center-left">
                <div class="home-center-tit">
                    <img src="/static/homeImg/shenhe.png" alt="" />
                    <div class="img-tit">我的待审核</div>
                </div>
                <div
                    v-if="
                        !approvalRecordListLoading &&
                            approvalRecordList.length <= 0
                    "
                    style="width: 100%;height: 100%;text-align: center;"
                >
                    <el-empty></el-empty>
                </div>
                <div
                    class="center-left"
                    v-else-if="approvalRecordList.length"
                    v-loading="approvalRecordListLoading"
                >
                    <div
                        class="center-left-item"
                        v-for="(item, i) in approvalRecordList"
                        :key="i"
                    >
                        <div class="left-item">
                            <img
                                class="left-item-img"
                                src="/static/homeImg/naozhong.png"
                                alt=""
                            />
                            <div class="left-item-time">
                                {{ item.create_time }}
                            </div>
                        </div>
                        <div class="right-item">
                            <div class="right-item-top">{{ item.title }}</div>
                            <div class="right-item-bottom">
                                发布人：{{ item._create_user_disp }}
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card shadow="never" class="home-center-right">
                <div class="home-center-tit">
                    <img src="/static/homeImg/xiazai.png" alt="" />
                    <div class="img-tit">我的下载</div>
                </div>
                <div
                    v-if="!myDownloadListLoading && myDownloadList.length <= 0"
                    style="width: 100%;height: 100%;text-align: center;"
                >
                    <el-empty></el-empty>
                </div>
                <div
                    class="center-right"
                    v-else-if="myDownloadList.length"
                    v-loading="myDownloadListLoading"
                >
                    <div
                        class="center-right-item"
                        v-for="(item, i) in myDownloadList"
                        :key="i"
                    >
                        <div class="icon"></div>
                        <div class="tit-name">{{ item.title_name }}</div>
                    </div>
                </div>
            </el-card>
        </div>
        <el-card shadow="never" class="home-bottom">
            <div class="echarts-top">
                <img
                    class="echarts-top-img"
                    src="/static/homeImg/tongji.png"
                    alt=""
                />
                <div class="echarts-top-tit">文章发布数统计</div>
                <el-radio-group
                    class="echarts-top-radio"
                    v-model="radio"
                    size="mini"
                    fill="#27A280"
                    @change="radioChange"
                >
                    <!-- <el-radio-button label="机构发布统计"></el-radio-button>
                    <el-radio-button label="专家发布统计"></el-radio-button>
                    <el-radio-button label="运营发布统计"></el-radio-button> radioList-->
                    <el-radio-button
                        v-for="item in radioList"
                        :key="item.value"
                        :label="item.value"
                    >
                        {{ item.label }}
                    </el-radio-button>
                </el-radio-group>
                <div class="echarts-top-btn">
                    <el-button
                        round
                        size="mini"
                        :class="{ btnSelet: btnName === '昨日' }"
                        @click="seletDate('昨日')"
                        >昨日
                    </el-button>
                    <el-button
                        round
                        size="mini"
                        :class="{ btnSelet: btnName === '近七天' }"
                        @click="seletDate('近七天')"
                    >
                        近七天
                    </el-button>
                    <el-button
                        round
                        size="mini"
                        :class="{ btnSelet: btnName === '近一个月' }"
                        @click="seletDate('近一个月')"
                        >近一个月
                    </el-button>
                    <el-button
                        round
                        size="mini"
                        :class="{ btnSelet: btnName === '近半年' }"
                        @click="seletDate('近半年')"
                    >
                        近半年
                    </el-button>
                    <el-button
                        round
                        size="mini"
                        :class="{ btnSelet: btnName === '近一年' }"
                        @click="seletDate('近一年')"
                    >
                        近一年
                    </el-button>
                </div>
                <el-date-picker
                    class="echarts-top-time"
                    size="mini"
                    v-model="time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    @change="timeChange"
                >
                </el-date-picker>
            </div>
            <div style="display: flex;width: 100%;">
                <div id="home-echarts"></div>
                <div class="ranking">
                    <div class="ranking-tit">统计报表</div>
                    <div style="display: flex;justify-content: space-around;">
                        <el-select
                            v-model="statisticalStatement"
                            placeholder="请选择"
                            @change="getList"
                        >
                            <el-option
                                v-for="item in [
                                    '各个栏目统计',
                                    '机构发布下载统计',
                                    '专家发布下载统计',
                                    '地区统计',
                                    '文件类型统计'
                                ]"
                                :key="item"
                                :label="item"
                                :value="item"
                            >
                            </el-option>
                        </el-select>
                        <el-button @click="xlsxDown">
                            下载
                        </el-button>
                    </div>
                    <el-table
                        v-if="statisticalStatement === '各个栏目统计'"
                        :data="tableData"
                        :tree-props="{ children: 'children' }"
                        row-key="uid"
                        style="width: 100%;margin-top:30px;"
                        height="300px"
                    >
                        <el-table-column prop="classify_name" label="栏目名称">
                        </el-table-column>
                        <el-table-column prop="view_amount" label="浏览量">
                        </el-table-column>
                        <el-table-column prop="pub_amount" label="发布量">
                        </el-table-column>
                    </el-table>

                    <el-table
                        v-if="statisticalStatement === '机构发布下载统计'"
                        :data="tableData"
                        style="width: 100%;margin-top:30px;"
                        height="300px"
                    >
                        <el-table-column prop="organ_name" label="机构名称">
                        </el-table-column>
                        <el-table-column prop="cnt" label="发布量">
                        </el-table-column>
                        <el-table-column
                            prop="page_download_num"
                            label="下载量"
                        >
                        </el-table-column>
                    </el-table>

                    <el-table
                        v-if="statisticalStatement === '文件类型统计'"
                        :data="tableData"
                        style="width: 100%;margin-top:30px;"
                        height="300px"
                    >
                        <el-table-column prop="file_format" label="文件类型">
                        </el-table-column>
                        <el-table-column
                            prop="file_format_cnt"
                            label="发布数量"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="file_download_cnt"
                            label="下载数量"
                        >
                        </el-table-column>
                    </el-table>

                    <el-table
                        v-if="statisticalStatement === '专家发布下载统计'"
                        :data="tableData"
                        style="width: 100%;margin-top:30px;"
                        height="300px"
                    >
                        <el-table-column prop="publisher" label="专家名称">
                        </el-table-column>
                        <el-table-column prop="cnt" label="发布量">
                        </el-table-column>
                        <el-table-column
                            prop="page_download_num"
                            label="下载量"
                        >
                        </el-table-column>
                    </el-table>
                    <el-table
                        v-if="statisticalStatement === '地区统计'"
                        :data="tableData"
                        style="width: 100%;margin-top:30px;"
                        height="300px"
                    >
                        <el-table-column prop="area_name" label="地区">
                        </el-table-column>
                        <el-table-column prop="cnt" label="浏览量">
                        </el-table-column>
                    </el-table>
                    <!--<div style="width: 100%;display: flex;flex-wrap: wrap;">
                        <div class="ranking-item" v-for="(item, i) in rankLinst" :key="i">
                            <div class="icon"></div>
                            <div class="ranking-num">TOP{{ i+1 }}</div>
                            <div class="ranking-name">{{ item.publisher }}</div>
                            <div class="num">{{ item.total }}</div>
                        </div>
                    </div> -->
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import * as echarts from "echarts";
import * as homePage from "../../api/homePage.js";
import * as approvalRecord from "../../api/ToBeReviewed";
import * as myDownload from "../../api/myDownload";
import XLSX from "xlsx";
export default {
    data() {
        return {
            radio: "机构",
            radioList: [
                {
                    value: "机构",
                    label: "机构发布统计"
                },
                {
                    value: "专家",
                    label: "专家发布统计"
                },
                {
                    value: "运营人员",
                    label: "运营发布统计"
                }
            ],
            time: [],
            btnName: "近一年",
            today: "",
            yesterday: "",
            sevenDaysAgo: "",
            oneMonthAgo: "",
            sixMonthsAgo: "",
            oneYearAgo: "",
            echart: null,
            rankLinst: [],
            totalResult: {
                page_download_num: 0,
                collection_num: 0,
                page_view_num: 0,
                total: 0
            },
            approvalRecordList: [],
            approvalRecordListLoading: true,
            myDownloadList: [],
            myDownloadListLoading: true,
            xAxis: [],
            seriesVal: [],
            tableData: [],
            statisticalStatement: "各个栏目统计"
        };
    },

    mounted() {
        this.userInfo = JSON.parse(localStorage.getItem("user_info"));
        // this.initRadio()
        this.getTime();
        this.seletDate("近一年");
        this.queryTotal();
        this.onLoadapprovalRecordList();
        //this.queryCountGroupByPublisher()
        this.onLoadMyDownloadList();
        this.getList();
    },

    methods: {
        queryTotal() {
            homePage
                .queryTotal()
                .then(res => {
                    if (res.state == "SUCCESS" && res.data.length > 0) {
                        this.totalResult = res.data[0];
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        initRadio() {
            if (this.userInfo.roleName === "专家") {
                this.radio = "2";
                this.radioList = [this.radioList[1]];
            } else if (this.userInfo.roleName === "机构") {
                this.radio = "1";
                this.radioList = [this.radioList[0]];
            }
        },
        radioChange(e) {
            this.queryCountGroupByMonth();
            this.getList();
        },
        timeChange(e) {
            this.queryCountGroupByMonth();
            this.getList();
        },
        queryCountGroupByMonth() {
            const param = {
                type: this.radio,
                startTime: this.time[0],
                endTime: this.time[1]
            };
            homePage
                .queryCountGroupByMonth(param)
                .then(res => {
                    if (res.state == "SUCCESS") {
                        var chartData = res.data;
                        let monthArr = [];
                        let datas = this.time[2];
                        if (["近一年", "近半年"].includes(this.btnName)) {
                            datas.forEach(item => {
                                let obj = {
                                    month: item,
                                    num: 0
                                };
                                chartData.forEach(item1 => {
                                    if (
                                        this.moment(item1.release_date).format(
                                            "YYYY-MM"
                                        ) == item
                                    ) {
                                        obj.num += item1.cnt;
                                    }
                                });
                                monthArr.push(obj);
                            });
                        }
                        if (["近七天", "近一个月"].includes(this.btnName)) {
                            datas.forEach(item => {
                                let obj = {
                                    month: item,
                                    num: 0
                                };
                                chartData.forEach(item1 => {
                                    if (
                                        this.moment(item1.release_date).format(
                                            "MM-DD"
                                        ) == item
                                    ) {
                                        obj.num = item1.cnt;
                                    }
                                });
                                monthArr.push(obj);
                            });
                        }
                        if (this.btnName === "昨日") {
                            datas.forEach(item => {
                                let obj = {
                                    month: item,
                                    num: 0
                                };
                                chartData.forEach(item1 => {
                                    if (
                                        this.moment(item1.release_date).format(
                                            "hh"
                                        ) == item
                                    ) {
                                        obj.num = item1.cnt;
                                    }
                                });
                                monthArr.push(obj);
                            });
                        }

                        this.xAxis = monthArr.map(item => item.month);
                        this.seriesVal = monthArr.map(item => item.num);
                        this.initChart();
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        queryCountGroupByPublisher() {
            const param = {
                area: this.area,
                areaType: this.areaType
            };
            homePage
                .queryCountGroupByPublisher(param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.rankLinst = res.data.data;
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        onLoadapprovalRecordList() {
            this.approvalRecordListLoading = true;
            approvalRecord
                .queryByPage()
                .then(res => {
                    if (res.state == "SUCCESS") {
                        this.approvalRecordList = res.data;
                    }
                    this.approvalRecordListLoading = false;
                })
                .catch(error => {
                    console.log(error);
                    this.approvalRecordListLoading = false;
                });
        },
        onLoadMyDownloadList() {
            this.myDownloadListLoading = true;
            myDownload
                .queryByPage()
                .then(res => {
                    this.myDownloadListLoading = false;
                    if (res.state == "SUCCESS") {
                        this.myDownloadList = res.data;
                    }
                })
                .catch(error => {
                    this.myDownloadListLoading = false;
                    console.log(error);
                });
        },
        getTime() {
            // 获取今日日期
            this.today = this.moment().format("YYYY-MM-DD");
            // 获取一年前的日期
            this.oneYearAgo = this.moment()
                .subtract(1, "year")
                .format("YYYY-MM-DD");
            // 获取半年前的日期
            this.sixMonthsAgo = this.moment()
                .subtract(6, "months")
                .format("YYYY-MM-DD");
            // 获取一个月前的日期
            this.oneMonthAgo = this.moment()
                .subtract(1, "month")
                .format("YYYY-MM-DD");
            // 获取七天前的日期
            this.sevenDaysAgo = this.moment()
                .subtract(7, "days")
                .format("YYYY-MM-DD");
            // 获取昨日日期
            this.yesterday = this.moment()
                .subtract(1, "days")
                .format("YYYY-MM-DD");
        },
        seletDate(data) {
            this.btnName = data;
            if (data === "近一年") {
                let start = this.moment(this.oneYearAgo);
                let end = this.moment(this.today);
                let datas = [];
                for (let i = start; i.isBefore(end); i.add(1, "month")) {
                    datas.push(i.format("YYYY-MM"));
                    i = this.moment(i);
                }
                this.time = [this.oneYearAgo, this.today, datas];
            } else if (data === "昨日") {
                let start = this.moment(this.yesterday);
                let end = this.moment(this.today);
                let datas = [];
                for (let i = 0; i <= 24; i++) {
                    datas.push(String(i).padStart(2, "0"));
                }
                this.time = [this.yesterday, this.today, datas];
            } else if (data === "近七天") {
                let start = this.moment(this.sevenDaysAgo);
                let end = this.moment(this.today);
                let datas = [];
                for (let i = start; i.isBefore(end); i.add(1, "day")) {
                    datas.push(i.format("MM-DD"));
                    i = this.moment(i);
                }
                this.time = [this.sevenDaysAgo, this.today, datas];
            } else if (data === "近一个月") {
                let start = this.moment(this.oneMonthAgo);
                let end = this.moment(this.today);
                let datas = [];
                for (let i = start; i.isBefore(end); i.add(1, "day")) {
                    datas.push(i.format("MM-DD"));
                    i = this.moment(i);
                }
                this.time = [this.oneMonthAgo, this.today, datas];
            } else if (data === "近半年") {
                let start = this.moment(this.sixMonthsAgo);
                let end = this.moment(this.today);
                let datas = [];
                for (let i = start; i.isBefore(end); i.add(1, "month")) {
                    datas.push(i.format("YYYY-MM"));
                    i = this.moment(i);
                }
                this.time = [this.sixMonthsAgo, this.today, datas];
            }
            this.queryCountGroupByMonth();
            this.getList();
        },
        initChart() {
            this.echart = echarts.init(document.getElementById("home-echarts"));
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                xAxis: {
                    type: "category",
                    data: this.xAxis
                },
                yAxis: {
                    type: "value",
                    name: "文章数/篇"
                },
                series: [
                    {
                        data: this.seriesVal,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "#37DBAD"
                                    },
                                    {
                                        offset: 1,
                                        color: "#73E3FA"
                                    }
                                ]
                            ),
                            borderRadius: 10
                        },
                        // 设置条柱宽度
                        barWidth: 20,
                        type: "bar"
                    }
                ]
            };
            this.echart.setOption(option);
        },
        getList() {
            let param = {
                startDate: this.time[0],
                endDate: this.time[1]
            };
            if (this.statisticalStatement === "地区统计") {
                homePage
                    .getStatisForCity(param)
                    .then(res => {
                        if (res.state == "SUCCESS") {
                            let mess = [];
                            res.data.map(item => {
                                if (
                                    mess.findIndex(
                                        item1 =>
                                            item1.area_name == item.area_name
                                    ) == -1
                                ) {
                                    let obj = {
                                        area_name: item.area_name,
                                        cnt: item.cnt
                                    };
                                    mess.push(obj);
                                } else {
                                    let index = mess.findIndex(
                                        item1 =>
                                            item1.area_name === item.area_name
                                    );
                                    mess[index].cnt += item.cnt;
                                }
                            });
                            this.tableData = mess;
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else if (this.statisticalStatement === "机构发布下载统计") {
                homePage
                    .getStatisForJigou(param)
                    .then(res => {
                        if (res.state == "SUCCESS") {
                            let mess = [];
                            res.data.map(item => {
                                if (
                                    mess.findIndex(
                                        item1 =>
                                            item1.organ_name === item.organ_name
                                    ) == -1
                                ) {
                                    let obj = {
                                        organ_name: item.organ_name,
                                        cnt: item.cnt,
                                        page_download_num:
                                            item.page_download_num
                                    };
                                    mess.push(obj);
                                } else {
                                    let index = mess.findIndex(
                                        item1 =>
                                            item1.organ_name === item.organ_name
                                    );
                                    mess[index].cnt += item.cnt;
                                    mess[index].page_download_num +=
                                        item.page_download_num;
                                }
                            });
                            this.tableData = mess;
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else if (this.statisticalStatement === "专家发布下载统计") {
                homePage
                    .getStatisForZhuanjia(param)
                    .then(res => {
                        if (res.state == "SUCCESS") {
                            let mess = [];
                            res.data.map(item => {
                                if (
                                    mess.findIndex(
                                        item1 =>
                                            item1.publisher === item.publisher
                                    ) == -1
                                ) {
                                    let obj = {
                                        publisher: item.publisher,
                                        cnt: item.cnt,
                                        page_download_num:
                                            item.page_download_num
                                    };
                                    mess.push(obj);
                                } else {
                                    let index = mess.findIndex(
                                        item1 =>
                                            item1.publisher === item.publisher
                                    );
                                    mess[index].cnt += item.cnt;
                                    mess[index].page_download_num +=
                                        item.page_download_num;
                                }
                            });
                            this.tableData = mess;
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else if (this.statisticalStatement === "各个栏目统计") {
                homePage
                    .getStatisForLanmu(param)
                    .then(res => {
                        if (res.state == "SUCCESS") {
                            function flatArrayToTree(flatData) {
                                const result = [];
                                const map = {};

                                // 先构建一个id映射表
                                flatData.forEach(item => {
                                    map[item.uid] = { ...item, children: [] };
                                });

                                // 然后根据parentId将子节点添加到父节点的children属性下
                                flatData.forEach(item => {
                                    if (item.p_uid !== null) {
                                        map[item.p_uid].children.push(
                                            map[item.uid]
                                        );
                                    } else {
                                        result.push(map[item.uid]);
                                        let i = 0;
                                    }
                                });

                                return result;
                            }
                            let mess = flatArrayToTree(res.data);
                            this.tableData = mess;
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else if (this.statisticalStatement === "文件类型统计") {
                homePage
                    .getStatisForfile(param)
                    .then(res => {
                        if (res.state == "SUCCESS") {
                            this.tableData = res.data;
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        xlsxDown() {
            let sheetData = [];
            if (this.statisticalStatement === "地区统计") {
                sheetData = this.tableData.map(item => ({
                    地区: item.area_name,
                    浏览量: item.cnt
                }));
            } else if (this.statisticalStatement === "机构发布下载统计") {
                sheetData = this.tableData.map(item => ({
                    机构名称: item.organ_name,
                    发布量: item.cnt,
                    下载量: item.page_download_num
                }));
            } else if (this.statisticalStatement === "专家发布下载统计") {
                sheetData = this.tableData.map(item => ({
                    专家名称: item.publisher,
                    发布量: item.cnt,
                    下载量: item.page_download_num
                }));
            } else if (this.statisticalStatement === "各个栏目统计") {
                sheetData = this.tableData.map(item => ({
                    栏目名称: item.classify_name,
                    浏览量: item.view_amount,
                    发布量: item.pub_amount
                }));
                // sheetData = this.tableData.map(item => ({
                //     '栏目名称': item.classify_name_f,
                //     '浏览量': item.page_view_num,
                //     '发布量': item.cnt
                // }))
            } else if (this.statisticalStatement === "文件类型统计") {
                sheetData = this.tableData.map(item => ({
                    文件类型: item.file_format,
                    发布数量: item.file_format_cnt,
                    下载数量: item.file_download_cnt
                }));
            }
            const wb = XLSX.utils.book_new();
            const ws = XLSX.utils.json_to_sheet(sheetData);
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
            XLSX.writeFile(wb, "exported_data.xlsx");
        }
    }
};
</script>
<style lang="scss" scoped>
.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    min-height: 100vh;
}

.home-top {
    width: 100%;
    /* width: calc(100% - 20px); */
    // width: 1600px;
    display: flex;
    justify-content: space-between;
    /* justify-content: space-around; */
    margin-bottom: 20px;
    /* padding: 10px; */
    /* background-color: #fff; */

    .home-top-item {
        position: relative;
        width: 360px;
        height: 130px;

        .home-tit-one {
            position: absolute;
            top: 50px;
            left: 50px;
            font-size: 24px;
            color: #fff;
        }

        .home-tit-two {
            position: absolute;
            top: 40px;
            left: 140px;
            font-size: 48px;
            color: #fff;

            .home-tit-three {
                font-size: 20px;
                color: #fff;
            }
        }
    }

    .home-top-one {
        background: url("/static/homeImg/one.png");
        background-size: 100% 100%;
    }

    .home-top-two {
        background: url("/static/homeImg/two.png");
        background-size: 100% 100%;
    }

    .home-top-three {
        background: url("/static/homeImg/three.png");
        background-size: 100% 100%;
    }

    .home-top-four {
        background: url("/static/homeImg/four.png");
        background-size: 100% 100%;
    }
}

.home-center {
    // width: 1600px;
    width: 100%;
    display: flex;
    gap: 20px;

    .home-center-left {
        flex: 1;
        min-height: 300px;
    }

    .home-center-right {
        width: 40%;
        min-height: 300px;
    }
}

.home-center-tit {
    position: relative;
    display: flex;

    .img-tit {
        position: absolute;
        left: 30px;
        font-size: 18px;
    }
}

.center-left {
    margin-top: 60px;
    width: 100%;
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    .center-left-item {
        display: flex;
        gap: 10px;
        height: 70px;
        border: 1px solid #e0fff5;
        border-radius: 10px;
        .left-item {
            width: 70px;
            height: 70px;
            background: #f4faf8;

            .left-item-img {
                margin: 14px 0 4px 23px;
            }

            .left-item-time {
                text-align: center;
                font-size: 10px;
                color: #27a280;
            }
        }

        .right-item {
            .right-item-top {
                width: 360px;
                font-size: 14px;
                color: #4c4c4c;
                line-height: 40px;
                white-space: nowrap;
                /* 将文本限制在一行内 */
                overflow: hidden;
                /* 超出容器宽度的文本进行裁剪 */
                text-overflow: ellipsis;
                /* 设置省略号样式 */
            }

            .right-item-bottom {
                width: 360px;
                font-size: 12px;
                color: #707070;
                white-space: nowrap;
                /* 将文本限制在一行内 */
                overflow: hidden;
                /* 超出容器宽度的文本进行裁剪 */
                text-overflow: ellipsis;
                /* 设置省略号样式 */
            }
        }
    }
}

.center-right {
    margin-top: 60px;

    .center-right-item {
        display: flex;
        gap: 10px;
        margin-bottom: 30px;

        .icon {
            margin-top: 3px;
            width: 10px;
            height: 10px;
            background: linear-gradient(136deg, #d9afd9 0%, #93facc 100%);
            border-radius: 5px;
        }

        .tit-name {
            width: 550px;
            font-size: 14px;
            color: #4c4c4c;
            white-space: nowrap;
            /* 将文本限制在一行内 */
            overflow: hidden;
            /* 超出容器宽度的文本进行裁剪 */
            text-overflow: ellipsis;
            /* 设置省略号样式 */
        }
    }
}

.home-bottom {
    width: 100%;
    margin: 20px 0;

    .echarts-top {
        position: relative;
        height: 40px;
        display: flex;

        .echarts-top-img {
            position: absolute;
            top: 10px;
            left: 0;
        }

        .echarts-top-tit {
            position: absolute;
            top: 12px;
            left: 24px;
            color: #4c4c4c;
            margin-left: 10px;
        }

        .echarts-top-radio {
            position: absolute;
            top: 6px;
            left: 190px;
        }

        .echarts-top-btn {
            position: absolute;
            top: 6px;
            left: 540px;
            display: flex;
            gap: 16px;

            .btnSelet {
                background: #27a280;
                color: #fff;
            }
        }

        .echarts-top-time {
            position: absolute;
            top: 6px;
            left: 1060px;
        }
    }
}

#home-echarts {
    width: 950px;
    min-width: 60%;
    height: 485px;
}

.ranking {
    flex: 1;
    .ranking-tit {
        text-align: center;
        line-height: 60px;
        color: #4c4c4c;
        font-size: 16px;
    }
}

.ranking-item {
    display: flex;
    width: 350px;
    font-size: 14px;
    line-height: 32px;
    margin-bottom: 20px;

    .icon {
        height: 10px;
        width: 10px;
        margin: 11px 0 0 40px;
        background: #777;
        border-radius: 5px;
    }

    .ranking-num {
        width: 30px;
        margin-left: 16px;
        color: #666;
    }

    .ranking-name {
        margin-left: 36px;
        width: 100px;
        color: #4c4c4c;
    }

    .num {
        margin-left: 36px;
        height: 32px;
        width: 32px;
        background: rgba(39, 162, 128, 0.1);
        line-height: 32px;
        color: #27a280;
        text-align: center;
        border-radius: 16px;
    }
}
</style>
